<div #menu class="x-menu" [ngClass]="classMap">
  <div class="x-menu-nodes" *ngIf="layout === 'column'">
    <ng-container *ngFor="let node of nodes; trackBy: trackByNode">
      <ng-container *ngTemplateOutlet="nodeColumnTpl; context: { $node: node, $children: true }"></ng-container>
    </ng-container>
  </div>
  <x-slider
    *ngIf="layout === 'row'"
    [data]="nodes"
    [size]="size"
    [nodeTpl]="nodeRowTpl"
    [nodeJustify]="'center'"
    [activatedIndex]="rootIndex"
    (indexChange)="rootIndexChange($event)"
  ></x-slider>
</div>

<ng-template #nodeTpl let-node="$node">
  <x-dropdown
    *ngIf="node.level === 0 && collapsed"
    [disabled]="!node.leaf"
    [data]="node.children"
    [trigger]="trigger"
    placement="right-start"
    (nodeClick)="onNodeClick($event)"
    [portalMinWidth]="portalMinWidth"
    children
  >
    <x-menu-node [node]="node" [menu]="this"></x-menu-node>
  </x-dropdown>
  <x-menu-node *ngIf="!collapsed" [node]="node" [menu]="this"></x-menu-node>
</ng-template>

<ng-template #nodeRowTpl let-node="$node">
  <x-dropdown
    [disabled]="!node.leaf"
    [data]="node.children"
    [trigger]="trigger"
    (nodeClick)="onNodeClick($event)"
    [portalMinWidth]="portalMinWidth"
    children
  >
    <div class="x-menu-node" [ngClass]="nodeClassMap">
      <ng-container *ngTemplateOutlet="nodeTpl; context: { $node: node }"></ng-container>
    </div>
  </x-dropdown>
</ng-template>

<ng-template #nodeColumnTpl let-node="$node">
  <div
    class="x-menu-node"
    [class.x-activated]="activated?.id === node.id"
    [class.x-menu-category]="node.categoryNode"
    [ngClass]="nodeClassMap"
    (click)="onToggle($event, node)"
    [style.padding-left.rem]="(node.level + 1) * 0.875"
  >
    <ng-container *ngTemplateOutlet="nodeTpl; context: { $node: node }"></ng-container>
  </div>
  <div class="x-menu-nodes" *ngIf="node.childrenLoaded || (node.leaf && node.open)" [hidden]="!node.open">
    <ng-container *ngFor="let child of node.children; trackBy: trackByNode">
      <ng-container *ngTemplateOutlet="nodeColumnTpl; context: { $node: child }"></ng-container>
    </ng-container>
  </div>
</ng-template>
